<template>
  <div v-if="props.style == 'map'" class="box-container">
    <div class="outer-box">
      <div
        class="box missing"
        v-for="(item, index) in useChildMap.itemList"
        :key="index"
      >
        <span >
          <div class="ball-container">
            <div class="ball"></div>
            <div class="ball"></div>
          </div>
          <div class="inner-box">
            {{ item.child.description }}
          </div>
        </span>
      </div>
    </div>
  </div>

  <div v-if="props.style == 'list'" class="">
    <q-card-actions align="right">
      <q-btn v-if="canDrag" @click="cancel" class="close-btn">Cancel</q-btn>
      <q-btn v-if="canDrag" @click="save" class="blue-btn">Save</q-btn>
      <q-btn v-if="!canDrag" @click="reOderMode" class="blue-btn"
        >Edit-mode</q-btn
      >
      <q-btn v-if="!canDrag" class="yellow-btn" @click="assign = true"
        >Assign</q-btn
      >
      <q-btn v-if="!canDrag" class="default-btn" @click="create = true"
        >Create</q-btn
      >
      <q-dialog  v-model="assign">
        <AssignChildStock
          @update-child="onupdateChild"
          :parent_stock_code="stockItem ? stockItem.stock_code : ''"
        ></AssignChildStock>
      </q-dialog>
      <q-dialog  v-model="create" full-width>
        <StockItemForm
          @cancel="closeDialog"
          :lv="'level 5'"
          :from="'create'"
          :parent_stock_code="stockItem?.stock_code"
        ></StockItemForm>
      </q-dialog>
    </q-card-actions>
    <div class="row">
      <table class="col-12">
        <thead>
          <tr class="row">
            <th class="col-2 fac">Sequence</th>
            <th class="col-4 fac">Stock Code</th>
            <th class="col-4 fac">Description</th>
            <th class="col-2 fac" v-if="canDrag">Action</th>
          </tr>
        </thead>
      </table>
    </div>
    <ScrollArea :bot-margin="50">
    <q-card class="row" style="padding-bottom: 2rem;">

      <!-- <table class="col-3">
        <thead>
          <tr class="row">
            <th class="col-12 fac">Sequence</th>
          </tr>
        </thead>

        <tbody>
          <tr
            v-for="(item, index) in useChildMap.itemList"
            :key="index"
            class="cursor-pointer row"
            :class="[canDrag ? 'editable' : 'non-editable']"
          >
            <td class="col-12 fac">
              <q-btn
                style="padding: 0.36rem"
                dense
                round
                flat
                :label="index + 1"
              ></q-btn>
            </td>
          </tr>
        </tbody>
      </table> -->

      <table class="col-12">
        <!-- <thead>
          <tr class="row">
            <th class="col-2 fac">Sequence</th>
            <th class="col-4 fac">Stock Code</th>
            <th class="col-4 fac">Description</th>
            <th class="col-2 fac" v-if="canDrag">Action</th>
          </tr>
        </thead> -->

        <tbody>
          <draggable
            class="dragArea list-group w-full"
            :rows="rows"
            @update="updateSequence"
          >
            <tr
              v-for="item in useChildMap.itemList"
              :key="item.sequence"
              class="cursor-pointer row"
              :class="[canDrag ? 'editable' : 'non-editable']"
            >
              <td class="col-2 fac">{{ item.sequence +1  }}</td>
              <td class="col-4 fac">{{ item.child.stock_code }}</td>
              <td class="col-4 fac">{{ item.child.description }}</td>
              <td class="col-2 fac">
                <q-btn
                  dense
                  round
                  flat
                  class="del-btn"
                  @click.stop="deleteFn(item.child.stock_code, item.sequence)"
                  :icon="canDrag ? 'delete' : ''"
                ></q-btn>
              </td>
            </tr>
          </draggable>
        </tbody>
      </table>

      <!-- <q-dialog  v-model="deleteDialogVisible">
        <q-card>
          <q-card-section class="bg-red">
            <div class="text-h6 text-white">
              Are you sure to delete stock code {{ editedRow.stock_code }} ?
            </div>
          </q-card-section>

          <q-card-actions align="right">
            <q-btn
              flat
              class="close-btn"
              label="No"
              color="primary"
              v-close-popup
            />
            <q-btn
              flat
              label="Delete"
              class="delete-btn"
              @click="removeItem"
              v-close-popup
            />
          </q-card-actions>
        </q-card>
      </q-dialog> -->
    </q-card>
  </ScrollArea>

  </div>
</template>

<script setup lang="ts">
import { ChildStockItem, StockItem } from 'src/services/type';
import { computed, ref } from 'vue';
import { VueDraggableNext as draggable } from 'vue-draggable-next';
import { useChildMapStore } from 'src/stores/childMapStore';
import AssignChildStock from 'src/components/itemMaster/AssignChildStock.vue';
import StockItemForm from './StockItemForm.vue';
import StockItemEditComponent from 'src/components/itemMaster/StockItemEditComponent.vue';

import { useQuasar } from 'quasar';
import ScrollArea from '../ScrollArea.vue';

const useChildMap = useChildMapStore();
const editedRow = ref();
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);

const props = defineProps<{
  style: 'map' | 'list';
  stockItem?: StockItem;
}>();

const rows = ref<ChildStockItem[]>(useChildMap.itemList);

const canDrag = ref(false);

const assign = ref(false);
const create = ref(false);
const $q = useQuasar();

function openDeleteDialog(row: StockItem) {
  editedRow.value = { ...row };

  deleteDialogVisible.value = true;
}

function reOderMode() {
  canDrag.value = true;
}

function closeDialog() {
  assign.value = false;
  editDialogVisible.value = false;
  create.value = false;
}

function deleteFn(stock_code: string, sequence: number) {
  $q.dialog({
    title: 'Confirm',
    message: 'Are you sure to delete this record?',
    cancel: true,
  }).onOk(async () => {
    if (props.stockItem) {
    const msg = await useChildMap.removeStockItemChildData(
      props.stockItem.stock_code,
      stock_code,
      sequence
    );
    if ((msg.code = '1')) {
      $q.notify({
        color: 'positive',
        position: 'bottom',
        message: msg.message,
      });
    } else {
      $q.notify({
        color: 'negative',
        position: 'bottom',
        message: msg.message,
      });
    }
  }
  });
}

/* async function removeItem() {
  if (props.stockItem) {
    const msg = await useChildMap.removeStockItemChildData(
      props.stockItem.stock_code,
      editedRow.value.stock_code
    );
    if ((msg.code = '1')) {
      $q.notify({
        color: 'positive',
        position: 'bottom',
        message: msg.message,
      });
    } else {
      $q.notify({
        color: 'negative',
        position: 'bottom',
        message: msg.message,
      });
    }
  }
} */

async function cancel() {
  if (props.stockItem) {
    await useChildMap.getChildStockItemsData(props.stockItem.stock_code);
  }
  canDrag.value = false;
}

function save() {
  if (props.stockItem) {
    useChildMap.updateSequenceData(props.stockItem?.stock_code);
  }
  canDrag.value = false;
}

async function delChild(id: number) {
  //todo
}

function updateSequence(event: any) {
  useChildMap.updateSequence(event);
}

function onupdateChild() {
  if (props.stockItem) {
    useChildMap.getChildStockItemsData(props.stockItem?.stock_code)
  }
  closeDialog();
}
</script>

<style scoped>

::-webkit-scrollbar {
  width: 0.1rem;
}

::-webkit-scrollbar-track {
  background-color: #a5b1a7;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

table tbody tr {
  border-top: 1px solid #d9d9d9;
}
td {
  padding: 0.5rem;
}

table thead {
  top: 0;
  background-color: white;
  z-index: 10;
}

.cursor-pointer {
  cursor: pointer;
}
.non-editable {
  pointer-events: none;
  margin: 0.3rem;
  border: #d9d9d9 solid 1px;
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.editable {
  margin: 0.3rem;
  border: #2c37b4 solid 1px;
  color: #2c37b4;
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
</style>
